{include file="common/header" /}
<!-- Page body -->
<div class="page-body">
    <div class="container-xl">
        <div class="row row-cards">
            <div class="col-md-6 offset-md-3">
                <div class="card">
                <div class="card-body">
                    <div class="row g-2 align-items-center">
                    <div class="col-auto">
                        <span class="avatar avatar-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path></svg>
                        </span>
                    </div>
                    <div class="col">
                        <h4 class="card-title m-0">
                        <a>{$userInfo.nickname}</a>
                        </h4>
                        <div class="text-secondary">
                        {$userInfo.username}
                        </div>
                    </div>
                    <div class="col-auto">
                        <button class="btn btn-sm"  data-bs-toggle="modal" data-bs-target="#setUserPwdModal">修改密码</button>
                    </div>
                    <div class="col-auto">
                        <div class="dropdown">
                          <a href="#" class="btn-action" data-bs-toggle="dropdown" aria-expanded="false">
                            <!-- Download SVG icon from http://tabler-icons.io/i/dots-vertical -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>
                          </a>
                          <div class="dropdown-menu dropdown-menu-end">
                            <a onclick="logOut()" class="dropdown-item text-danger">退出登录</a>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
                </div>
            </div>
            <div class="col-md-6 offset-md-3">
                <div class="card">
                  <div class="card-body">
                    <h3 class="card-title">详细信息</h3>
                    <div class="input-group mb-4">
                        <span class="input-group-text">
                            <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-user-star"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" /><path d="M6 21v-2a4 4 0 0 1 4 -4h.5" /><path d="M17.8 20.817l-2.172 1.138a.392 .392 0 0 1 -.568 -.41l.415 -2.411l-1.757 -1.707a.389 .389 0 0 1 .217 -.665l2.428 -.352l1.086 -2.193a.392 .392 0 0 1 .702 0l1.086 2.193l2.428 .352a.39 .39 0 0 1 .217 .665l-1.757 1.707l.414 2.41a.39 .39 0 0 1 -.567 .411l-2.172 -1.138z" /></svg>
                             权限
                        </span>
                        <input value="{:getUserRole($userInfo.role)}" type="text" class="form-control" placeholder="username" autocomplete="off" disabled>
                    </div>
                    <div class="input-group mb-4">
                        <span class="input-group-text">
                            <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-user-star"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" /><path d="M6 21v-2a4 4 0 0 1 4 -4h.5" /><path d="M17.8 20.817l-2.172 1.138a.392 .392 0 0 1 -.568 -.41l.415 -2.411l-1.757 -1.707a.389 .389 0 0 1 .217 -.665l2.428 -.352l1.086 -2.193a.392 .392 0 0 1 .702 0l1.086 2.193l2.428 .352a.39 .39 0 0 1 .217 .665l-1.757 1.707l.414 2.41a.39 .39 0 0 1 -.567 .411l-2.172 -1.138z" /></svg>
                            角色
                        </span>
                        <input value="{:getUserType($userInfo.type)}" type="text" class="form-control" placeholder="username" autocomplete="off" disabled>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 修改密码模态框 -->
<div class="modal modal-blur fade" id="setUserPwdModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">修改密码</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">旧密码</label>
            <input id="oldPassword" type="text" class="form-control" placeholder="请输入旧的密码">
          </div>
          <div class="mb-3">
            <label class="form-label">新密码</label>
            <input id="newPassword" type="text" class="form-control" placeholder="请输入新的密码">
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-link link-secondary" data-bs-dismiss="modal">
            取消
          </button>
          <button onclick="setUserPassword()" class="btn btn-primary ms-auto">
           确认
          </button>
        </div>
      </div>
    </div>
  </div>
<!-- 修改密码模态框结束 -->

{include file="common/footer" /}

<script>
    function logOut(){
        axios.post('/index/user/logOut')
        .then(function (res) {
            if(res.data.code == 200){
                window.location.href = "/index/index/login";
            }else{
                layer.alert(res.data.msg);
            }
        })
        .catch(function (error) {
            console.log(error);
        });
    }

    function setUserPassword(){
        var oldPassword = $('#oldPassword').val();
        var newPassword = $('#newPassword').val();
        if(oldPassword == '' || newPassword == ''){
            layer.alert('请填写完整');return;
        }
        axios.post('/index/user/setUserPassword', {
            oldPassword: oldPassword,
            newPassword: newPassword
        })
        .then(function (res) {
            layer.alert(res.data.msg);
        })
        .catch(function (error) {
            console.log(error);
        });
    }
</script>
